/**
 * 目标1：完成省市区下拉列表切换
 *  1.1 设置省份下拉菜单数据
 *  1.2 切换省份，设置城市下拉菜单数据，清空地区下拉菜单
 *  1.3 切换城市，设置地区下拉菜单数据
 */
//省份下拉菜单
axios({
    url: 'http://hmajax.itheima.net/api/province'
}).then(result => {
    const optionStr = result.data.list.map(pname => `<option value="${pname}">${pname}</option>`).join('')
    document.querySelector('.province').innerHTML = `<option value="">省份</option>` + optionStr
})
//切换省份，设置城市下拉菜单数据，清空地区下拉菜单
document.querySelector('.province').addEventListener('change', async e => {
    const result = await axios({
        url: 'http://hmajax.itheima.net/api/city',
        params: { pname: e.target.value }
    })
    const optionStr = result.data.list.map(cname => `<option value="${cname}">${cname}</option>`).join('')
    //把默认城市选项卡+下属城市插入select中
    document.querySelector('city').innerHTML = `<option value="">城市</option>` + optionStr
    //清空地区数据
    document.querySelector('.city').innerHTML = `<option value="">地区</option>` + optionStr
})

//切换城市，设置地区
document.querySelector('.city').addEventListener('change', async e => {
    const result = await axios({
        url: 'http://hmajax.itheima.net/api/area',
        params: { cname: e.target.value }
    })
    const optionStr = result.data.list.map(aName => `<option value="${aName}">${aName}</option>`).join('')
    document.querySelector('.area').innerHTML = `<option value="">地区</option>` + optionStr
})

document.querySelector('.submit').addEventListener('click', e => {
    alert("提交成功")
})
